<div class="box">
    <div class="box-header with-border">
        <button (click)="create()" type="button" class="btn btn-sx btn-success"><i class="glyphicon glyphicon-plus"></i> 添加</button>
        <div class="box-tools">
                <div class="input-group input-group-sm hidden-xs" style="width: 150px;">
                  <input [formControl]="nameFilter" type="text" name="table_search" class="form-control pull-right" placeholder="Search">

                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
                  </div>
                </div>
              </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th style="width: 10px">#</th>
                    <th>股票名词</th>
                    <th>股票价格</th>
                    <th style="width: 150px;text-align:center;">股票评级</th>
                    <th style="width: 200px;text-align:center;">操作</th>
                </tr>
                <tr *ngFor="let stock of stocks | stockFilter:'name':keywores;let i= index;">
                    <td>{{i+1}}</td>
                    <td>{{stock.name}}</td>
                    <td>{{stock.price}}</td>
                    <td><app-stars [rating]="stock.rating" style="display: flex;justify-content:space-around;"></app-stars></td>
                    <td style="display: flex;justify-content:space-around;">
                        <a type="button" class="btn btn-sx btn-danger" (click)="uptate(stock)"><i class="glyphicon glyphicon-pencil"></i> 修改</a>
                        <a type="button" class="btn btn-sx btn-warning"><i class="glyphicon glyphicon-remove"></i> 删除</a>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <!-- /.box-body -->
    <div class="box-footer clearfix">
        <ul class="pagination pagination-sm no-margin pull-right">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">»</a></li>
        </ul>
    </div>
</div>